<template>
  <div>
    <div>
      <el-radio-group v-model="data.type">
        <el-radio :label="'device'">设备数据过滤</el-radio>
        <el-radio :label="'timeRange'">时间范围过滤</el-radio>
      </el-radio-group>
    </div>
    <div v-if="data.type == 'device'">
      <el-row>
        <el-col>
          <el-button
            plain
            @click="openDeviceSelector"
            size="mini"
            :style="!isUseCurrDevice ? 'color: #409eff' : ''"
            >指定设备:{{ selectedDeviceName }}</el-button
          >
          <el-button
            plain
            @click="useCurrDevice"
            size="mini"
            :style="isUseCurrDevice ? 'color: #409eff' : ''"
            >使用当前设备</el-button
          >
        </el-col>
      </el-row>
      <DeviceSelector
        v-if="showDeviceSelector"
        @deviceSelected="onDeviceSelected"
        :param="deviceParam"
      ></DeviceSelector>
      <el-row>
        <el-col :span="2"> 条件: </el-col>
        <el-col :span="22">
          <el-row v-for="cond in data.conditions" :key="cond.identifier">
            <el-col :span="20">
              <FilterPropCondition
                v-if="!isUseCurrDevice"
                :data="cond"
                :items="modelItems"
              ></FilterPropCondition>
              <FilterCondition v-else :data="cond"> </FilterCondition>
            </el-col>
            <el-col :span="4">
              <el-button plain @click="delCondition(cond)" size="mini"
                >-</el-button
              >
            </el-col>
          </el-row>
          <el-button plain @click="addCondition" size="mini">+</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import DeviceSelector from "../device/DeviceSelector.vue";
import FilterPropCondition from "./FilterPropCondition.vue";
import FilterCondition from "./FilterCondition.vue";
import { GetThingModel } from "../../api/productApi";
import { GetDeviceByDn } from "@/api/deviceApi";
export default {
  name: "Filtera",
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          type: "device",
          conditions: [],
        };
      },
    },
  },
  data() {
    return {
      showProductSelector: false,
      selectedDevice: {},
      showDeviceSelector: false,
      selectedDeviceName: "",
      modelItems: [],
      deviceParam: {},
      isUseCurrDevice: !!this.selectedDeviceName,
    };
  },
  // 注册组件
  components: {
    DeviceSelector,
    FilterPropCondition,
    FilterCondition,
  },
  created() {
    this.init();
  },
  watch: {
    data() {
      this.init();
    },
  },
  methods: {
    init() {
      if (this.data.type == "device" && this.data.conditions.length > 0) {
        let pkDn = this.data.conditions[0].device.split("/");
        if (pkDn.length < 2) {
          this.isUseCurrDevice = true;
          return;
        }

        GetDeviceByDn(pkDn[0], pkDn[1]).then((res) => {
          this.selectedDeviceName = res.productKey + "/" + res.deviceName;
          this.getThingModel(res.productKey);
        });
      }
    },
    useCurrDevice() {
      this.isUseCurrDevice = true;
      this.showDeviceSelector = false;
      this.selectedDevice = null;
      this.selectedDeviceName = "";
    },
    openDeviceSelector() {
      this.isUseCurrDevice = false;
      this.showDeviceSelector = !this.showDeviceSelector;
    },
    onDeviceSelected(device) {
      this.selectedDevice = device;
      this.selectedDeviceName = device.productKey + "/" + device.deviceName;
      this.showDeviceSelector = false;
      this.data.conditions.forEach((cond) => {
        cond.device = this.selectedDeviceName;
      });

      this.getThingModel(device.productKey);
    },
    getThingModel(pk) {
      GetThingModel(pk).then((res) => {
        this.initThingModel(res);
      });
    },
    initThingModel(res) {
      this.modelItems = [];
      let items = [];
      this.modelItems.push({
        name: "属性",
        items: items,
      });
      res.model.properties.forEach((p) => {
        items.push({
          type: "property",
          identifier: p.identifier,
          name: p.name,
        });
      });

      this.modelItems.push({
        name: "状态",
        items: [
          {
            type: "state",
            identifier: "online",
            name: "是否在线",
          },
        ],
      });
    },
    addCondition() {
      this.data.conditions.push({
        id: Math.random(),
        device: this.selectedDeviceName,
      });
    },
    delCondition(cond) {
      let index = this.data.conditions.findIndex((c) => {
        return c.id == cond.id;
      });
      this.data.conditions.splice(index, 1);
    },
  },
};
</script>

<style>
</style>
